{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>AI Peng资源分享网-用户登录</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="{% static 'css/common.css' %}">
</head>
<body>
<!-- 导航条开始 -->
{% include 'common/_nav.html' %}
<!-- 导航条结束 -->

<!-- 布局 -->
<div class="container">
    <div class="row">
        <div style="margin-top: 60px;">
            <!-- 中间开始 -->
            <div class="col-md-12">
                <div class="jumbotron">
                    <h3 style="color: red;font-size: 26px">要想使用完整的功能，请先登录</h3>
                    <p>
                        <b style="font-size: 20px;font-weight: bold">AI Peng资源网：</b>
                        致力于分享技术文章，提供免费的技术视频，提供免费的IT电子书等优质资源
                    </p>
                </div>
                <form style="margin-top: 10px;" id="loginForm">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
                    </div>
                    <div class="form-group" id="passwordBox">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
                        <p class="help-block hide" id="password1Help">用户名或密码错误</p>
                    </div>
                    <button type="submit" class="btn btn-success">立即登录</button>
                </form>
            </div>
            <!-- 中间结束 -->
        </div>
    </div>
</div>

<nav class="navbar navbar-inverse navbar-fixed-bottom">
    <!-- 底部开始 -->
    <div class="footer" style="text-align: center; color: white; padding: 10px;">
        <p>理想国真惠玩-张大鹏 2020年12月17日-至今</p>
        <p>备案号：京ICP 6666666</p>
    </div>
    <!-- 底部结束 -->
</nav>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
    $("#loginForm").submit(function (e) {
        e.preventDefault()
        // 获取用户名和密码
        let username = $("#username").val()
        let password = $("#password").val()
        // 解决csrf验证问题
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
        });
        // 向后台异步提交数据
        let url = '/user/login_ajax/'
        $.post(url, {username, password}, function (data) {
            {#console.log(data)#}
            if (data.code === 10000) {
                //成功
                window.location.href = '/'
            } else {
                //失败
                $("#passwordBox").addClass('form-input-error')
                $("#passwordBox p.help-block").removeClass('hide')
            }
        });
    });
</script>
</body>
</html>